<template>
    <div>
        <div class="video">
            <div class="sidebar">
                <div class="sidebar s-item" @click="changOp(1)" :class="[idx == 1 ? 'active' : '']">
                    <i class="el-icon-s-data"></i>
                    <span>章节</span>
                </div>
                <div class="sidebar s-item" @click="changOp(2)" :class="[idx == 2 ? 'active' : '']">
                    <i class="el-icon-question"></i>
                    <span>问答</span>
                </div>
                <div class="sidebar s-item" @click="changOp(3)" :class="[idx == 3 ? 'active' : '']">
                    <i class="el-icon-edit"></i>
                    <span>笔记</span>
                </div>
                <div class="sidebar s-item" @click="changOp(4)" :class="[idx == 4 ? 'active' : '']">
                    <i class="el-icon-s-comment"></i>
                    <span>评论</span>
                </div>
            </div>
            <div class="player-container">
               <VideoItem></VideoItem>
            </div>
            <div class="op-main" v-if="isOp">
                <div v-if="idx == 1">
                    <directory></directory>
                </div>
                <div v-else-if="idx == 2">
                    <question></question>
                </div>
                <div v-else-if="idx == 3">
                    <notebook></notebook>
                </div>
                <div v-else>
                    <comment></comment>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import question from './question'
import notebook from './notebook'
import comment from './comment'
import directory from './directory'
import VideoItem from './video'

export default {
    name: "course",
    components: {
        question,
        notebook,
        comment,
        directory,
        VideoItem
    },
    data() {
        return {
            isOp: false,
            idx: -1,
        }
    },
    methods: {
        changOp(idx) {
            // 相同的就直接切换页面
            if (this.idx == idx) {
                this.isOp = !this.isOp;
            } else {
                // 不相同的就需要展示
                this.idx = idx;
                this.isOp = true;
            }
        },
        closeIdx() {
            this.idx = -1;
            this.isOp = false;
        }
    },
}
</script>

<style scoped>
.video {
    display: flex;
    justify-content: space-between;
    height: calc(100vh - 96px);
}

.sidebar {
    background: #1c1f21;
    width: 60px;
    display: flex;
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: gray;
}

.s-item {
    cursor: pointer;
    margin: 20px 0;
    font-size: 13px;
}

.s-item i {
    font-size: 20px;
}

.s-item:hover {
    color: #409EFF;
}

.player-container {
    flex: 1;
}

.op-main {
    width: 500px;
}

.active {
    color: #409EFF;
}
</style>